<template>
	<view class="recruit-page">
		<view class="recruit-header">
			<text class="page-title">招新宣传</text>
			<text class="page-subtitle">加入我们，共创未来</text>
		</view>

		<view class="team-intro">
			<view class="intro-card">
				<view class="intro-content">
					<text class="intro-title">关于创数团队</text>
					<text class="intro-text">创数团队是一支充满活力的软件科技团队，致力于创新技术的研发与应用。我们专注于前端开发、后端架构、移动应用开发等领域，为校园和社会提供优质的软件解决方案。</text>
				</view>
			</view>
		</view>

		<view class="recruit-positions">
			<view class="section-title">
				<text class="title-text">招新岗位</text>
				<view class="title-line"></view>
			</view>

			<view class="position-list">
				<view class="position-item" v-for="(position, index) in positions" :key="index" @click="viewPosition(position)">
					<view class="position-header">
						<text class="position-title">{{ position.title }}</text>
						<view class="position-tag" :class="position.level">
							<text class="tag-text">{{ position.levelText }}</text>
						</view>
					</view>
					<text class="position-desc">{{ position.description }}</text>
					<view class="position-requirements">
						<text class="req-title">要求：</text>
						<text class="req-text">{{ position.requirements }}</text>
					</view>
					<view class="position-footer">
						<text class="position-deadline">截止时间：{{ position.deadline }}</text>
						<view class="apply-button" @click.stop="applyPosition(position)">
							<text class="apply-text">立即报名</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="team-highlights">
			<view class="section-title">
				<text class="title-text">团队亮点</text>
				<view class="title-line"></view>
			</view>

			<view class="highlights-grid">
				<view class="highlight-item">
					<view class="highlight-icon">
						<text class="icon-text">🏆</text>
					</view>
					<text class="highlight-title">获奖经历</text>
					<text class="highlight-desc">多次获得省级、国家级竞赛奖项</text>
				</view>
				<view class="highlight-item">
					<view class="highlight-icon">
						<text class="icon-text">💼</text>
					</view>
					<text class="highlight-title">项目经验</text>
					<text class="highlight-desc">丰富的商业项目开发经验</text>
				</view>
				<view class="highlight-item">
					<view class="highlight-icon">
						<text class="icon-text">👥</text>
					</view>
					<text class="highlight-title">团队氛围</text>
					<text class="highlight-desc">轻松愉快的学习工作环境</text>
				</view>
				<view class="highlight-item">
					<view class="highlight-icon">
						<text class="icon-text">📚</text>
					</view>
					<text class="highlight-title">技术成长</text>
					<text class="highlight-desc">系统性的技术培训和指导</text>
				</view>
			</view>
		</view>

		<view class="contact-section">
			<view class="section-title">
				<text class="title-text">联系我们</text>
				<view class="title-line"></view>
			</view>

			<view class="contact-info">
				<view class="contact-item">
					<text class="contact-label">QQ群：</text>
					<text class="contact-value">123456789</text>
				</view>
				<view class="contact-item">
					<text class="contact-label">微信群：</text>
					<text class="contact-value">扫码加入</text>
				</view>
				<view class="contact-item">
					<text class="contact-label">邮箱：</text>
					<text class="contact-value">recruit@chuangshu.com</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				positions: [
					{
						id: 1,
						title: '前端开发工程师',
						level: 'junior',
						levelText: '初级',
						description: '负责团队项目的前端开发工作，包括页面设计、交互实现、性能优化等。',
						requirements: '熟悉HTML、CSS、JavaScript，了解Vue/React等框架，有项目经验者优先。',
						deadline: '2024-12-31'
					},
					{
						id: 2,
						title: '后端开发工程师',
						level: 'intermediate',
						levelText: '中级',
						description: '负责后端API开发、数据库设计、服务器部署等工作。',
						requirements: '熟悉Node.js/Python/Java等后端技术，了解数据库操作，有RESTful API开发经验。',
						deadline: '2024-12-31'
					},
					{
						id: 3,
						title: 'UI/UX设计师',
						level: 'junior',
						levelText: '初级',
						description: '负责产品界面设计、用户体验优化、视觉设计等工作。',
						requirements: '熟练使用Figma、Sketch等设计工具，有良好的审美能力和用户体验意识。',
						deadline: '2024-12-31'
					},
					{
						id: 4,
						title: '产品经理',
						level: 'senior',
						levelText: '高级',
						description: '负责产品规划、需求分析、项目管理等工作。',
						requirements: '有产品思维，了解软件开发流程，具备良好的沟通协调能力。',
						deadline: '2024-12-31'
					}
				]
			}
		},
		onLoad() {
			console.log('招新页面加载完成')
		},
		methods: {
			viewPosition(position) {
				uni.showToast({
					title: '查看详情功能开发中...',
					icon: 'none'
				})
			},
			applyPosition(position) {
				uni.showModal({
					title: '确认报名',
					content: `确定要报名${position.title}吗？`,
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '报名成功！',
								icon: 'success'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruit-page {
		min-height: 100vh;
		background: #f9fafb;
		padding: 40rpx;
	}

	.recruit-header {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.page-title {
		display: block;
		font-size: 48rpx;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 16rpx;
	}

	.page-subtitle {
		display: block;
		font-size: 28rpx;
		color: #6b7280;
	}

	.team-intro {
		margin-bottom: 40rpx;
	}

	.intro-card {
		background: linear-gradient(135deg, #6366f1, #8b5cf6);
		border-radius: 16rpx;
		padding: 32rpx;
		color: #ffffff;
	}

	.intro-title {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.intro-text {
		display: block;
		font-size: 26rpx;
		line-height: 1.6;
		opacity: 0.9;
	}

	.recruit-positions {
		margin-bottom: 40rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.title-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #1f2937;
		margin-right: 20rpx;
	}

	.title-line {
		flex: 1;
		height: 2rpx;
		background: linear-gradient(90deg, #6366f1, #8b5cf6);
		border-radius: 1rpx;
	}

	.position-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.position-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}

	.position-item:active {
		transform: translateY(2rpx);
		box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
	}

	.position-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}

	.position-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #1f2937;
	}

	.position-tag {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}

	.position-tag.junior {
		background: #dbeafe;
	}

	.position-tag.intermediate {
		background: #fef3c7;
	}

	.position-tag.senior {
		background: #fecaca;
	}

	.tag-text {
		font-size: 20rpx;
		font-weight: bold;
	}

	.position-tag.junior .tag-text {
		color: #1e40af;
	}

	.position-tag.intermediate .tag-text {
		color: #92400e;
	}

	.position-tag.senior .tag-text {
		color: #991b1b;
	}

	.position-desc {
		display: block;
		font-size: 26rpx;
		color: #1f2937;
		line-height: 1.5;
		margin-bottom: 16rpx;
	}

	.position-requirements {
		margin-bottom: 20rpx;
	}

	.req-title {
		font-size: 24rpx;
		font-weight: bold;
		color: #6b7280;
	}

	.req-text {
		font-size: 24rpx;
		color: #6b7280;
		line-height: 1.4;
	}

	.position-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.position-deadline {
		font-size: 22rpx;
		color: #9ca3af;
	}

	.apply-button {
		background: linear-gradient(135deg, #6366f1, #8b5cf6);
		border-radius: 20rpx;
		padding: 12rpx 24rpx;
	}

	.apply-text {
		font-size: 24rpx;
		font-weight: bold;
		color: #ffffff;
	}

	.team-highlights {
		margin-bottom: 40rpx;
	}

	.highlights-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.highlight-item {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		text-align: center;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	}

	.highlight-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #8b5cf6, #a78bfa);
		margin: 0 auto 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.icon-text {
		font-size: 32rpx;
	}

	.highlight-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #1f2937;
		margin-bottom: 8rpx;
	}

	.highlight-desc {
		display: block;
		font-size: 22rpx;
		color: #6b7280;
		line-height: 1.4;
	}

	.contact-section {
		margin-bottom: 40rpx;
	}

	.contact-info {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	}

	.contact-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.contact-item:last-child {
		margin-bottom: 0;
	}

	.contact-label {
		font-size: 28rpx;
		font-weight: bold;
		color: #1f2937;
		width: 160rpx;
	}

	.contact-value {
		font-size: 28rpx;
		color: #6366f1;
	}
</style>

